<div class="simpleExpressionPlots ui-widget-content" id="draggable" >
  <div id="close" onclick="closeBox()">close</div>
  <script type="text/javascript">
    $("#draggable").draggable({
        stop: function(event, ui)
        {
            var top = getTop(ui.helper);
            ui.helper.css('position', 'fixed');
            ui.helper.css('top', top+"px");
        }
    });
    <g:if test="${Projects.size()>1}">
      setBoxSize(${(Projects.size()*371)+29});
      $("#draggable").resizable({minWidth:686,
        maxWidth:686,
        maxHeight:${(Projects.size()*371)+29},
        alsoResize: ".simpleExpressionPlots .projects",
        stop: function(event, ui)
        {
            var top = getTop(ui.helper);
            ui.helper.css('position', 'fixed');
            ui.helper.css('top', top+"px");
      }});
    </g:if>
  </script>
  <div class="headline" id="boxhead">
    <g:set var="infoKey" value="${'simpleExpressionPlot'}" /><g:render template="../main/infoBox" />
    <div class="info"><g:if test="${(Protein.uniprot!=null)&&(Protein.uniprot.size()!=0)}">${(Protein.uniprot.fullName).toString()[1..-2]} (${Protein.mainId})</g:if><g:else>${Protein.mainId}</g:else></div>
  </div>
  <div class="projects">
    <g:each in="${Projects}" var="proj">
      <div class="proj">
        <div class="name">${proj.name}</div>
        <div class="plot" style="width: ${((400/proj.nrOfCelllines).toInteger())*proj.nrOfCelllines}px;">
          <g:set var="drawTissueAverage" value="${false}" />
          <g:set var="range" value="${Math.pow(10,(Math.floor(Math.log10(proj.max))-1))}" />
          <g:set var="rangeNo" value="${(Math.ceil(proj.max/range)+1)}" />
          <g:set var="Scale" value="${(rangeNo*range)/100}"/>
          <g:set var="linePos" value="${0}" />
          <g:set var="stripes" value="${1}" />
          <g:each in="${proj.cls.sort{it.key}.keySet()}" var="cls">
            <div class="cellline" style="width: ${((400/proj.nrOfCelllines).toInteger())*proj.cls[cls].intensities.size()}px; left: ${linePos}px;<g:if test="${cls==Cellline}">background-color:#d9b2ff;</g:if><g:else><g:if test="${(cls==RefLine)}">background-color:#b2ffcb;</g:if><g:else><g:if test="${(stripes%2)==1}">background-color:#fff;</g:if></g:else></g:else>">
              <g:set var="linePos" value="${linePos + ((400/proj.nrOfCelllines).toInteger())*proj.cls[cls].intensities.size()}" />
              <g:set var="intNumber" value="${0}" />
              <g:each in="${proj.cls[cls].intensities}" var="intensity">
                <div class="bar" style="background-color: ${Colors[cls]}; height: ${intensity/Scale}%; width: ${((400/proj.nrOfCelllines).toInteger()-1)}px; left: ${(((400/proj.nrOfCelllines).toInteger())*intNumber)}px;"><div class="barname" >${proj.cls[cls].exps[intNumber]}</div></div>
                <g:set var="intNumber" value="${intNumber + 1}" />
              </g:each>
              <g:if test="${proj.cls[cls].intensities.size()>1}">
                <g:set var="drawTissueAverage" value="${true}" />
                <div class="average" style="bottom: ${Math.pow(10,proj.cls[cls].avg)/Scale}%;"></div>
              </g:if>
            </div>
            <g:set var="stripes" value="${stripes+1}" />
          </g:each>
          <g:if test="${proj.cls.size()>1}">
            <div class="average" style="bottom: ${Math.pow(10,proj.avg)/Scale}%;"></div>
          </g:if>
          <div class="xLabel" style="width: ${((400/proj.nrOfCelllines).toInteger())*proj.nrOfCelllines}px;">
            <g:set var="linePos" value="${0}" />
            <g:each in="${proj.cls.sort{it.key}.keySet()}" var="cell">
              <div class="labelContainer element" style="width: ${((400/proj.nrOfCelllines).toInteger())*proj.cls[cell].exps.size()}px; left: ${linePos}px;">
                <div class="label" style="right: ${((((400/proj.nrOfCelllines).toInteger())*proj.cls[cell].exps.size())/2)-65}px;">${cell}</div>
              </div>
              <g:set var="linePos" value="${linePos + ((400/proj.nrOfCelllines).toInteger())*proj.cls[cell].intensities.size()}" />
            </g:each>
          </div>
          <div class="yLabel">
            <g:each in="${0..rangeNo}">
              <div class="scala<g:if test="${(it%5==0)||(it==rangeNo)}"> bold</g:if>" style="bottom:${(100*it)/rangeNo}%;"><g:if test="${(it%10==0)||(it==rangeNo)}"><div class="desk">${it}</div></g:if></div>
            </g:each>
            <div class="label">Expression Intensity [x 10<sup>${Math.log10(range).toInteger()}</sup>]</div>
          </div>
        </div>
        <div class="legend">
          <g:if test="${drawTissueAverage}" >
            <div class="avgCls"<g:if test="${proj.cls.size()<=1}"> style="bottom:10px;"</g:if>>
              <div class="avg"></div>
              <div class="legDesc">Average intensity in one tissue of origin</div>
            </div>
          </g:if>
          <g:if test="${proj.cls.size()>1}">
            <div class="avgAll">
              <div class="avg"></div>
              <div class="legDesc">Average intensity in all tissues of origin</div>
            </div>
          </g:if>
        </div>
      </div>
    </g:each>
  </div>
</div>
